<template>
  <div class="tabs-table" style="margin: 20px;padding-bottom: 30px">

    <!--  数据表格  -->
    <div>
      <el-table
        :data="tableData"
        v-loading="isLoading"
        border
        style="width: 100%;margin-bottom: 20px"
        :header-cell-style="{ background: '#f2f3f7', color: '#6c6c6c' }">
          <el-table-column prop="logo" label="logo" align="left" style="width: 25%" >
            <template slot-scope="scope">
              <span class="file-download" @click="previewImg(scope.row.logo)">{{ scope.row.logo.split('=')[1] }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="background" label="背景" align="left"  style="width: 25%">
            <template slot-scope="scope">
              <span class="file-download" @click="previewBackground(scope.row.background)">{{ scope.row.background.split('=')[1] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createUser" label="创建人" align="center" style="width: 25%">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center" style="width: 25%">
          </el-table-column>
      </el-table>
    </div>

    <!-- logo图片预览 -->
    <el-dialog
      title="浏览图像"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%">
      <el-image style="max-width:300px;max-height:300px;" :src="imgUrl"></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downloadImg(downloadImgUrl,filePath)">下载</el-button>
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 图片预览 -->
    <el-dialog
      title="浏览图像"
      :visible.sync="dialogVisibleBackground"
      :close-on-click-modal="false"
      width="40%">
      <el-image style="max-width:300px;max-height:300px;" :src="imgUrl"></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downloadBackground(downloadImgUrl,filePath)">下载</el-button>
        <el-button @click="dialogVisibleBackground = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'HelloWord',
  data () {
    return {
      dialogVisible: false,
      dialogVisibleBackground: false,
      imgUrl: '',
      downloadImgUrl: '',
      filePath:'',
      tableData: [],
      isLoading: false
    };
  },
  mounted () {
    this.init();
  },
  methods: {
    // 预览图片
    previewImg (fileUrl) {
      this.imgUrl = this.$BASE_API + '/res/preview/img/' + fileUrl;
      this.downloadImgUrl = this.$BASE_API + '/res/download/file/' + fileUrl;
      this.dialogVisible = true;
    },
    // 下载文件
    downloadImg (fileUrl) {
      var a = document.createElement('a');
      a.download = name || 'pic';
      // 设置图片地址
      a.href = fileUrl;
      a.click();
    },

    // 预览图片
    previewBackground (fileUrl) {
      this.imgUrl = this.$BASE_API + '/res/preview/img/' + fileUrl;
      this.downloadImgUrl = this.$BASE_API + '/res/download/file/' + fileUrl;
      this.filePath = '/res/download/file/' + fileUrl;
      this.dialogVisibleBackground = true;
    },
    /**
     * @description: 文件下载
     * @param {Object} downloadFileUrl
     * @param {Object} filePath
     * @return void
     */
    downloadBackground (downloadFileUrl,filePath) {
      let _that = this;
      let downloadUrl = filePath;
      this.$downloadPost(downloadUrl).then(res => {
        console.log(res);
        _that.$fileDownload(res.data, downloadFileUrl);
      });
    },

    /**
     * @description: 数据查询
     * @return void
     */
    queryData () {
      let _this = this;
      _this.tableData = [];
      _this.isLoading = true;
      _this.$get('/res/img/list').then((res) => {
        if (res.code === '200') {
          _this.tableData = res.data;
          _this.isLoading = false;
        }else{
          this.$message.error(res.msg);
        }
      });
    },

    /**
     * @description: 初始化
     * @return void
     */
    init () {
      this.tableData = [];
      this.queryData();
    }
  }
};
</script>

<style scoped lang="less">
.file-download{
  cursor: pointer;
  color:#8466FF
}
/*文字水平居中*/
.text-align-center{
  text-align: center;
}
</style>
